window.onload=function() {
    var vue=new Vue({
        el: "#system",
        data:{
            //模拟 代替数据集合
            xxx:[],
            //更新数据时间
            update_date:"",

            //查询环节的数据变量
            select_condition:"",//查询的条件
            select_data_list:[],//查询的数据集合
            //操作环节的变量
            on_off_operate:"",//on—off
            radio_operate:"",//单选框 开关
            multi_check_operate:"",//多选框
            single_input_operate:"",//单个输入框
            multi_input_operate1:"",//多个输入框1
            multi_input_operate2:"",//多个输入框2
        /*工具变量*/
            //当前页面时间
            current_page_time:"",
            //分页
            pageTotal:0,//总数据数
            pageCount:0,//总页码数
            part_data_list:[],//部分数据
            current_page_number:0,//当前页码
            data_by_:[],//要进行分页的数据



        },
        watch:{
            on_off_operate:{
                /*handler:'on_off_update',*/
                  /*handler(value){
                      this.on_off_update();
                  },*/
                handler(newValue,oldValue){
                    this.on_off_update();
                },
                /*immediate:true,*///首次绑定值 是否 触发
                deep:true
            },

        },
        methods:{

        /*获取数据方法*/
            //实时获取数据
            real_time_data:function (){
                const self = this;//回调函数无法发现本地变量,通过const self = this的方式，在回调函数外先获取本地组件引用，然后在回调函数内再进行使用和操作。
                var stompClient;
                var socket = new SockJS('/gs-guide-websocket');
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function (frame){
                    //例子：
                    /*stompClient.subscribe("/topic/xxx",function (result) {
                        self.current_temp.cTemp=result.body.substr(0,4);
                        self.current_humi.cHumi=result.body.substr(4,4);
                        self.current_temp.cTime=result.body.substr(8);
                        self.current_humi.cTime=result.body.substr(8);
                        self.temp_humi_update=1;
                        self.getData_Humi();//更新湿度 图
                        self.getMonitorStatus();//更新监控器
                    });*/
                });
            },
            //获取折线图所需要的的xxx数据集合
            getLine_xxxData:function () {
                axios({
                    method:"get",
                    url:"GetXxxData",
                }).then(result => {
                    this.xxx=result.data.extend.xxx;
                    this.LineGraphicalEcharts();
                })
            },
            //获取柱状图所需要的的xxx数据集合
            getBar_xxxData:function () {
                axios({
                    method:"get",
                    url:"GetXxxData",
                }).then(result => {
                    this.xxx=result.data.extend.xxx;
                    this.BarGraphicalEcharts();
                })
            },

        /*处理数据方法*/
            //on_off更新
            on_off_update:function () {
                axios({
                    method:"post",
                    url:"on_off_update",
                    params:{
                        on_off_operate:this.on_off_operate,
                    }
                }).then(result => {
                    this.xxx=this.on_off_operate;//把操作后的数据即时更新给前端页面
                    if(this.on_off_operate==""){//手动操作发送对应的帧
                        this.sendMessage("");
                    }
                })
            },
            //单选框更新
            radio_update:function () {
                axios({
                    method:"post",
                    url:"radio_operate",
                    params:{
                        radio_operate:this.radio_operate,
                    }
                }).then(result => {
                    this.xxx=this.radio_operate;//把操作后的数据即时更新给前端页面
                    if(this.radio_operate==""){//手动操作发送对应的帧
                        this.sendMessage("");
                    }
                })
            },
            //多选框更新
            multi_check_update:function () {
                axios({
                    method:"post",
                    url:"multi_check_operate",
                    params:{
                        multi_check_operate:this.multi_check_operate,
                    }
                }).then(result => {
                    this.xxx=this.multi_check_operate;//把操作后的数据即时更新给前端页面
                    if(this.multi_check_operate==""){//手动操作发送对应的帧
                        this.sendMessage("");
                    }
                })
            },
            //单个输入框更新
            single_input_update:function () {
                axios({
                    method:"post",
                    url:"input_operate",
                    params:{
                        single_input_operate:this.single_input_operate,
                    }
                }).then(result => {
                    this.xxx=this.single_input_operate;//把操作后的数据即时更新给前端页面
                    //手动操作发送对应的帧
                    this.sendMessage("");

                })
            },
            //多个输入框更新
            multi_input_update:function () {
                axios({
                    method:"post",
                    url:"input_operate",
                    params:{
                        multi_input_operate1:this.multi_input_operate1,
                        multi_input_operate2:this.multi_input_operate2,
                    }
                }).then(result => {
                    this.xxx=this.multi_input_operate1;//把操作后的数据即时更新给前端页面
                    this.xxx=this.multi_input_operate2;//把操作后的数据即时更新给前端页面
                    //手动操作发送对应的帧
                    this.sendMessage("");
                    this.sendMessage("");
                })
            },

        /*工具方法*/
            //初始化数据
            initializeData:function () {
                this.getLine_xxxData();
                this.getBar_xxxData();
            },
            //折线图
            LineGraphicalEcharts:function () {
                const self = this;
                var seriesData =[];
                for (var i = 0; i <this.xxx.length; i++) {//this.temp_list:要展示的数据集合

                    seriesData.push(this.xxx[i].agData);//this.temp_list[i].agData: y轴展示的数据

                };
                var xAxisData =[];
                for (var i = 0; i <this.xxx.length; i++) {
                    xAxisData.push(this.xxx[i].agTime.substring(5));//this.temp_list[i].agTime:x轴展示的数据

                };
                const myChart = echarts.init(document.getElementById('1'));//'1':在对应 div中的id 展示数据
                const Line_graphical = {
                    dataZoom:[
                        {
                            xAxisIndex: 0, //这里是从X轴的0刻度开始
                            show: false, //是否显示滑动条，不影响使用
                            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                            startValue: 0, // 从头开始。
                            endValue: 8, // 一次性展示8个。
                        }
                    ],
                    title:{
                        text:'实时温度'
                    },
                    tooltip:{
                        trigger:'axis'
                    },
                    legend:{
                        data:['温度']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        boundaryGap: false,
                        type: 'category',
                        data: xAxisData,

                    },
                    yAxis: {
                        type:'value'
                    },
                    series: [{
                        data: seriesData,
                        type: 'line',
                        itemStyle : { normal : { label : { show : true }}}
                    }]
                };
                setInterval(function () {
                    /*
                    self.temp_humi_update---判断当前数据是否更新了
                    xAxisData.push(***)---push 更新来的数据

                    **/
                    if(self.temp_humi_update==1){//当前所要展示的同种数据 更新了
                        xAxisData.push(self.current_temp.cTime.substring(5));//x、y轴 添加对应的实时数据
                        seriesData.push(parseFloat(self.current_temp.cTemp));
                        self.temp_humi_update=0;
                    }
                    if (Line_graphical.dataZoom[0].endValue == seriesData.length) {

                    } else {
                        Line_graphical.dataZoom[0].endValue = Line_graphical.dataZoom[0].endValue + 1;
                        Line_graphical.dataZoom[0].startValue = Line_graphical.dataZoom[0].startValue + 1;
                    }
                    myChart.setOption(Line_graphical);

                },500);
            },
            //柱状图
            BarGraphicalEcharts:function () {
                const self = this;
                var seriesData =[];
                for (var i = 0; i <this.humi_list.length; i++) {

                    seriesData.push(this.humi_list[i].agData);

                };
                var xAxisData =[];
                for (var i = 0; i <this.humi_list.length; i++) {
                    xAxisData.push(this.humi_list[i].agTime.substring(5));

                };
                //上面的内容解释 同折线图
                var startLocation=Math.ceil(((this.humi_list.length-6)/this.humi_list.length)*100);//使柱状图每次都是在最后面显示
                const myChart = echarts.init(document.getElementById('2'));
                const Bar_graphical = {
                    dataZoom: [{
                        show:true,
                        type: 'slider', //1平移 缩放
                        start: startLocation,//数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
                        end: '100', //数据窗口范围的结束百分比。范围是：0 ~ 100。
                        height:15,
                    }],
                    title:{
                        text:'实时湿度'
                    },
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'shadow'
                        }

                    },
                    legend:{
                        data:['湿度']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type:'category',
                        /*boundaryGap: false,*/
                        data: xAxisData,
                    },
                    yAxis: {
                        type:'value'
                    },
                    series: [{
                        name:'时刻湿度',
                        data: seriesData,
                        type: 'bar',
                        barWidth: 80,
                        itemStyle : { normal : { label : { show : true }}}
                    }]
                };
                myChart.setOption(Bar_graphical);
            },
            //获取当前控制时间
            get_current_time:function () {
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                if(mm<10){
                    mm="0"+mm;
                }
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                this.current_page_time= yy+'年'+mm+'月'+dd+'日'+hh+':'+mf+':'+ss;
            },
            //根据条件查询
            SelectDataByCondition:function () {
                if(this.select_condition=="")
                {
                    this.select_data_list=this.xxx;//将要的数据赋值给select_data_list
                }
                //总数据数
                this.pageTotal=this.select_data_list.length;
                //总页码数(取整 +1)
                this.pageCount= Math.ceil(this.pageTotal/5);
                this.dataByPageNum(1);
            },
            //根据页码获取相应的数据
            dataByPageNum:function (pn){
                if(pn<1){
                    pn=1;
                }
                if(pn>this.pageCount){
                    pn=this.pageCount;
                }
                this.part_data_list=[];
                this.current_page_number=pn;
                for (let i = 5*(pn-1); i <5*pn; i++) {
                    if(this.select_data_list[i]==null){
                        break;
                    }
                    this.part_data_list.push(this.select_data_list[i]);
                }
            },
            //给硬件发送Msg
            sendMessage:function (message) {
                axios({
                    method:"post",
                    url:"sendMessage",
                    data:message,
                }).then(result => {
                })
                // var params = new URLSearchParams();
                // params.append("message",message);
                // axios.post("/sendMessage2",params).then(res =>{
                //
                // });

            }

        },
        mounted(){

        },
    })
}